<template>
  <div >
    <!-- 表格 -->
    <el-table
     :border=true
    :header-cell-class-name="cellClass"
    ref="multipleTable"
    :data="tableData"
   tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column  type="selection"   align="left"     width="70">
      <template #header>
       <div ><span>全选</span></div>
       </template>
    </el-table-column>

    <el-table-column

      label="商品"
      align="center"
      width="380">

      <!-- 添加图片 -->
      <template slot-scope="scope">
        <div style="display: flex;">
          <img style="width: 80px;height: 80px;" :src="scope.row.image" alt="">
          <div style="font-size: 14px;  text-align: left;padding-left: 10px;  ">{{ scope.row.name }}</div>
        </div>
      </template>

    </el-table-column>
    <el-table-column
      prop="price"
       align="center"
        width="80"
      label="单价(元)"
      show-overflow-tooltip>
    </el-table-column>

    <el-table-column
      prop="number"
      label="数量"
       width="140"
       align="center"
     >
      <template slot-scope="scope">
        <el-input-number  size="small"
      v-model="scope.row.number"
      @change="(val) => handleChange(val, scope.$index)"
      :min="0"   >
    </el-input-number>
      </template>
    </el-table-column>

    <el-table-column
      align="center"
       width="120"
      prop="count"
      label="小计(元)"

      >
      <template slot-scope="scope">
        {{ Number(scope.row.price)*scope.row.number }}.00
      </template>
    </el-table-column>

    <el-table-column
      prop="operation"
      label="操作"
      show-overflow-tooltip>

       <template >
          <div style="color: #01aeec;"><a href="javascript:void(0)">删除</a></div>
          <div style="color: #01aeec;"><a href="javascript:void(0)">移到我的关注</a></div>
       </template>
    </el-table-column>

  </el-table>

    <!-- 底部结算 -->
   <div  style="display: flex;gap: 20px;font-size: 14px;padding-top: 10px;margin-top: 10px;  border:1px solid #ccc">
        <el-checkbox
      v-model="checkAll"
      @change="handleCheckAllChange"
      style="margin-bottom: 16px;padding-left: 10px;">
      全选
    </el-checkbox>

    <!-- 右边 -->
     <div style="margin-left: auto;">

       <div style="display: flex;gap: 20px;"> <span>已选择{{val.length}}件商品</span>
       <div>
        <span>总价(不包含运费) : <span style="color: red;">{{ total }}.00</span></span>
        <div><span>省：-￥20.00</span></div>
       </div>
      <!-- 结算 -->
       <div><el-button @click="$router.push('/order')" type="danger">结算</el-button></div>
      </div>

     </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      checkAll: false,
      tableData: [{
        image: require('@/static/home/like_02.png'),
        price: '718.00',
        name: '包包 女包 经典手提包 大容量单肩包女款时尚包包',
        number: 1,
        count: 11
      }, {
        image: require('@/static/home/like_03.png'),
        price: '718.00',
        name: '包包 女包 经典手提包 大容量单肩包女款时尚包包',
        number: 1,
        count: 11
      }, {
        image: require('@/static/home/like_02.png'),
        price: '718.00',
        name: '包包 女包 经典手提包 大容量单肩包女款时尚包包',
        number: 1,
        count: 11
      }, {
        image: require('@/static/home/like_02.png'),
        price: '718.00',
        name: '包包 女包 经典手提包 大容量单肩包女款时尚包包',
        number: 1,
        count: 11
      }, {
        image: require('@/static/home/like_02.png'),
        price: '718.00',
        name: '包包 女包 经典手提包 大容量单肩包女款时尚包包',
        number: 1,
        count: 11
      }],
      multipleSelection: [],
      val: [],
      total: 0// 总价
    }
  },

  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },

    cellClass (row) {
      if (row.columnIndex === 0) {
        return 'custom-header'
      }
    },

    /* 步进器 */
    handleChange (value, index) {
      console.log(value, index)

      console.log(this.val)
      this.tableData[index].count = Number(this.tableData[index].price) * value
      // 获取总价
      this.sum(this.val)
    },
    // 全选
    handleCheckAllChange (val) {
      this.$refs.multipleTable.toggleAllSelection(val)
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      this.checkAll = val.length === this.tableData.length
      console.log(val)
      this.val = val
      // 获取总价
      this.sum()
    },
    // 计算总价
    sum () {
      let count = 0
      this.val.forEach(item => {
        count = count + item.price * item.number
      })
      this.total = count
    }

  },

  computed: {

  }
}
</script>

<style lang="less" scoped>

/deep/  .el-table .custom-header .cell:before {
  content: "全部";
  position: absolute;
  left: 30px;

}

/* 移除所有表格边框线 */

/* 去除表头单元格边框 */
/deep/ .el-table th.el-table__cell {
 // border: none !important;
  background: #dfdbdb94;
}

/* 去除底部装饰线 */
/* /deep/ .el-table::before {
  height: 0 !important;
} */
 /deep/  .el-table td {

  border-left: none !important;
  border-right: none !important;
}
// 步进器样式

</style>
